<template>
  <div class="m-content">
    <Row type="flex" justify="space-between">
      <Col span="8">
        <div class="m-content-left">
          <Card title="选择角色" icon="ios-options" :padding="10" shadow style="width: 300px">
            <CellGroup @on-click="selectLevel">
              <Cell :name="`${index}-${item.id}`" v-for="(item, index) in levelInfo" :selected="num == index" :key="item.id" :title="item.name" />
            </CellGroup>
          </Card>
        </div>
      </Col>
      <Col span="16">
        <div class="m-content-right">
          <Table v-if="isShowTable" :loading="loading" :columns="columns" :data="menuList"></Table>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { columns1 } from '../js/columns'
export default {
  inject: ['reload'],
  data () {
    return {
      levelInfo: [],
      num: 0,  // 当前选中的权限等级
      level: 1,
      menuList: [],  // 总菜单列表
      selectedMenu: [],  // 已选中的菜单
      columns: columns1(this),
      isShowTable: true,  //是否显示table
      loading: false,  // 控制table是否加载中
    }
  },
  mounted () {
    this._getLevelInfo()
    this._getMenuInfo()
    this._getLevelMenu()
  },
  methods: {
    // 选择角色等级
    selectLevel (row) {
      this.loading = true
      let Row = row.split('-')
      this.num = Row[0]
      this.level = Row[1]
      this._getLevelMenu(this.level)
      // this.reload()
      this.isShowTable = false
      this.$nextTick(() => {
        this.loading = false
        this.isShowTable = true
      })
    },
    // 取消选中的单个菜单
    unSelect (row) {
      let index = this.selectedMenu.indexOf(row.id);
      if (index > -1) {
        this.selectedMenu.splice(index, 1);
        this._deleteLevelMenu(this.level, row.id)
      }
    },
    // 选中单个菜单
    selected (row) {
      this.selectedMenu.push(row.id)
      this._addLevelMenu(this.level, row.id)
    },
    // 获取角色等级列表
    async _getLevelInfo () {
      const url = 'levelinfo'
      const res = await this.GET_DATA({
        dataUrl: url
      })
      if (res) {
        this.$nextTick(() => {
          this.levelInfo = res.data.levelInfo
        })
      }
    },
    // 获取角色的菜单
    async _getLevelMenu (level) {
      const url = 'getlevelmenu'
      const res = await this.GET_DATA({
        dataUrl: url,
        level: level
      })
      if (res) {
        this.selectedMenu = res.data.menuList
      }
    },
    // 获取总菜单列表
    async _getMenuInfo () {
      const url = 'menuinfo'
      const res = await this.GET_DATA({
        dataUrl: url,
        isAll: 1
      })
      if (res) {
        this.$nextTick(() => {
          this.menuList = res.data.menuList
        })
      }
    },
    // 保存角色菜单接口
    async _addLevelMenu (level_id, menu_id) {
      const url = 'addlevelmenu'
      const res = await this.GET_DATA({
        dataUrl: url,
        level_id: level_id,
        menu_id: menu_id
      })
      if (res) {
        res.code === '0000' && this.$Message.success('操作成功')
      }
    },
    async _deleteLevelMenu (level_id, menu_id) {
      const url = 'deletelevelmenu'
      const res = await this.GET_DATA({
        dataUrl: url,
        level_id: level_id,
        menu_id: menu_id
      })
      if (res) {
        res.code === '0000' && this.$Message.success('操作成功')
      }
    },
    ...mapActions({
      GET_DATA: 'GET_DATA'
    })
  }
}
</script>

<style lang="scss">
.m-content-left {
  margin-left: 20px;
}
// .m-content-right {
//   border: 1px solid #dcdee2;
// }
</style>